Compilación del proyecto:
- Eliminamos el siguiente fragmento de código del archivo "angular.json" para que no se reemplace el archivo "environment.ts" y se mantengan las variables definidas en el archivo:
- Lanzamos el siguiente comando para instalar el elements:
- Modificamos el archivo app.module.ts
- Añadimos todo el código que va dentro de class AppModule{}
- IMPORTANTE: Tenemos que borrar AppComponent de bootstrap y añadir la linea de entryComponents con el AppComponent, podemos cambiar la llamada a customElements.define() para llamar al componente como queramos para cuando lo vayamos a usar, en este caso usaremos magenda-app .
- Lanzamos
ng build -c productionpara compilar todo el proyecto - Una vez finalizado el comando nuestro proyecto estará en la carpeta "dist"
ng add @angular/elements
En el archivo "index.html" que se genera podemos ver como se incrusta toda nuestra página usando la etiqueta <magenda-app> e incluyendo los imports del .css y los archivos .js, podemos usar la misma estructura para usar esta etiqueta en cualquiera página en la que queramos incrustarla.
Simplificar los archivos generados
En este caso se generan varios archivos ya que el proyecto tiene varios módulos, si queremos podemos simplificar todos estos archivos de la siguiente manera:
- Juntamos todos los archivos ".js" en un solo archivo con el siguiente comando:
- Quitamos los estilos que hay dentro de "index.html" y los metemos dentro del archivo styles.css (solo copiamos el contenido y lo pegamos al principio del archivo):
cat *.js > magenda-app.js
Una vez hecho esto, podemos borrar todos los archivos y quedarnos solo con magenda-app.js y styles.css (el archivo styles podemos renombrarlo porque el nombre que tendrá será algo como stylesXXXXXXX.css)
A continuación ya podríamos incrustar nuestra app de la siguiente manera:
Solo tenemos que importar el archivo js, el css y poner el nombre de nuestra etiqueta magenda-app en nuestro caso.
Pasar parámetros a nuestra página incrustada
Para pasar parámetros a nuestro componente solo tenemos que hacerlo indicando como atributos de la etiqueta de nuestro componente:
y en el app.component.ts tendríamos que configurar un Input de la siguiente manera:
esto lo veríamos así en el navegador:
